<extend name="Base/common"/>
<block name="style">
    <style type="text/css">
        .weui-cell_access .weui-cell__ftnone:after{border-style:none;}
        .weui-gallery{background:rgba(0, 0, 0, 0.6);}



        .top_bg{
            background: #f3ebc4;
            height:30px;
            width:100%;
        }
        .img_bg{
            height:100%;
            width:100%;
            float: left;

            font-size: 12px;
            text-align: center;
            line-height: 34px;

            background-image:url(__IMG__/laba.png); 
            background-repeat:no-repeat; 
            background-size:6% 70%;
            -moz-background-size:6% 70%;
            background-position:9% 5px;
            
        }
        .photo_front{
            width:90%;
            height:35%;
            margin-bottom: 5px;
            margin:auto;
            position: relative;
        }
        .photo_front img{
            width:100%;
            height:100%;
            border-radius: 2px 2px;
            margin-top: 5px;
        }
        .photo_title{
            width:45%;
            height:30px;
            float: left;
            font-size: 16px;
            line-height: 25px;
        }
        .photo_ask{
            width:45%;
            height:30px;
            float: right;
            text-align: right;
            font-size: 12px;
            color:orange;
            line-height: 28px;
        }
        .btn_ph{
            width:70px;
            height:70px;
            border:none;
            background: url(__IMG__/idcard/btn_ph.png) no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
            position: absolute;
            top: 30%;
            left: 39%;

        }
        .photo_hd{
            width:90%;
            height:3%;
            margin-left:5%;
            margin-top: 10px;
            margin-bottom:15px;
        }

        .zhez{
            width:100%;
            height: 100%;
            display: none;
            background: rgba(0,0,0,0.3);
            position: fixed;
            top:0;
            left:0;
        }
        .tank{
            width: 85%;
            height:50%;
            margin:auto;
            margin-top: 35%;
            border-radius: 3px 3px;
            background: #fff; 
        }
        .iknow{
            width:100%;
            background:none;
            margin-top: 15px;
            border:none;
            border-top:1px solid #e6e6e6;
            text-align:center;
            color:#2d91d7;
            line-height:35px;
        }








    </style>
</block>
<block name="body">

 <empty name="info">
    
    
        <form class="formtijiao" action="" method="post">
        
            <div class="top_bg">
                <i class="img_bg">照片仅用于确认本人身份，不会将您的照片泄露</i>
            </div>

            <div class="content" style="height:95%">
                <div class="photo_hd" >
                    <span class="photo_title">上传<font style="color:orange">正面</font>身份证</span>
                    <i class="photo_ask">拍照要求</i>
                </div>
                
                <div class="photo_front pic_up">
                    <input type="hidden" name="front_pic">
                    <i class="btn_ph "></i>
                    <img class="previewi" src="__IMG__/idcard/front.png">
                </div>

                 <div class="photo_hd" >
                    <span class="photo_title">上传<font style="color:orange">正面</font>身份证</span>
                    <i class="photo_ask">拍照要求</i>
                </div>

                <div class="photo_front pic_up">
                    
                    <input type="hidden" name="opposite_pic">
                    <i class="btn_ph"></i>
                    <img class="previewi" src="__IMG__/idcard/back.png">
                </div>

                <input type="button"  value="下一步" class="login-btn" style="width:80%;margin-top:13px;margin-left:10%;margin-bottom:3px;"/>
            </div>
        
        </form>


        <div class="zhez">
            
            <div class="tank">
                <h4 style="margin-top:5px;text-align:center;font-size:15px;color:#393939">拍照要求</h4>
                    <p style="width:85%;margin:auto;color:#000;font-size:13px;mare-height:18px;margin-top:10px;">身份证要求:</p>
                    <p style="width:85%;margin:auto;color:#6b6b6b;font-size:13px;line-height:18px;">1.身份证内容清晰，看清身份证上每个字和头像</p>
                    <p style="width:85%;margin:auto;color:#6b6b6b;font-size:13px;line-height:18px;">2.身份证信息完整</p>
                    <p style="width:85%;margin:auto;color:#6b6b6b;font-size:13px;line-height:18px;">3.不可修改照片内容</p>

                    <p style="width:85%;margin:auto;color:#000;font-size:13px;mare-height:18px;margin-top:10px;">手持身份证照片要求:</p>
                    <p style="width:85%;margin:auto;color:#6b6b6b;font-size:13px;line-height:18px;">1.用户手持本人身份证照片</p>
                    <p style="width:85%;margin:auto;color:#6b6b6b;font-size:13px;line-height:18px;">2.照片内容真实有效，不得修改</p>
                    <p style="width:85%;margin:auto;color:#6b6b6b;font-size:13px;line-height:18px;">3.建议按示例图拍摄，避免证件与头部重叠</p>
                <button class="iknow" >知道了</button>
            </div>


        </div>
    
    <else />
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>真实姓名</p>
                </div>
                <div class="weui-cell__ft">{$info.realname}</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>身份证号</p>
                </div>
                <div class="weui-cell__ft">{$info.identityNo|substr=0,2}****{$info.identityNo|substr=-2}</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>民族</p>
                </div>
                <div class="weui-cell__ft">{$info.nation}</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>性别</p>
                </div>
                <div class="weui-cell__ft">{$info.gender}</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>地址</p>
                </div>
                <div class="weui-cell__ft">{$info.address}</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>签发机关</p>
                </div>
                <div class="weui-cell__ft">{$info.issuing_authority}</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>有效期限</p>
                </div>
                <div class="weui-cell__ft">{$info.validity_period}</div>
            </div>
        </div>
        <div class="weui-cells__tips">
        <p class="login-tips"><em>温馨提示</em>：<br>1、如信息有误，请联系客服人员修改。<br>
    </div>
    </empty>
   


</block>
<block name="script">
     <script >



        Zepto(function($){

            $('.login-btn').click(function(){                
                var data =  $('form').serialize();
                var Url  = $('form').attr('action');
                $.ajax({
                    type:'post',
                    url:Url,
                    data:data,
                    // dataType:'json',
                    beforeSend:function(XMLHttpRequest){
                        popup.loading('正在提交中');
                        //ShowLoading();正在提交中
                    },
                    success:function(m){
                        confirm(m);
                        if(m=='信息识别成功！'){
                            location.href="{:U('realname')}";
                        }
                        
                        
                    },
                    complete:function(XMLHttpRequest,textStatus){
                       popup.noloading();
                    },
                    error:function(m){
                        //请求出错处理
                        popup.alert(m.XMLHttpRequest+'////')
                        popup.alert('请求出错处理');
                        return false;
                    }
                });

            }) ;

            $(".photo_ask").on("click", function(){
                $('.zhez').show();
            });
            $(".iknow").on("click", function(){
                $('.zhez').hide();
            });

        });

    </script>

    <script>
        wx.config({
            debug: false,
            appId: '{$weixinconfig.appId}',
            timestamp: '{$weixinconfig.timestamp}',
            nonceStr: '{$weixinconfig.nonceStr}',
            signature: '{$weixinconfig.signature}', 
            jsApiList: [
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'getLocalImgData'
            ]
        });
        wx.ready(function () {
// 5.1 拍照、本地选图
            var images = {
                localId: [],
                serverId: []
            };

 // 上传图片
            $(".pic_up").click(function(){ 
                var path='';
                var that =$(this);
                images.localId = [];
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: [ 'camera'],
                    // sourceType: [ 'camera','album'], // 可以指定来源是相册还是相机，默认二者都有 'album',
                    success: function (res) {  
                        images.localId = res.localIds;
                        if (images.localId.length == 0) {
                            alert('请先使用 chooseImage 接口选择图片');
                            return;
                        }
                        if(images.localId.length > 1) {
                            alert('目前仅支持单张图片上传,请重新上传');
                            images.localId = [];
                            return;
                        }
                        var i = 0, length = images.localId.length;
                        images.serverId = [];
                        function upload() {
                            wx.uploadImage({
                                localId: images.localId[i],
                                success: function (res) {
                                    i++;
                                    that.find('img.previewi').attr('src',images.localId[0]);
                                    images.serverId.push(res.serverId);
                                    that.find('input[type=hidden]').val(images.serverId[0]);
                                    if (i < length) {
                                        upload();
                                    }
                                },
                                fail: function (res) {
                                    alert(JSON.stringify(res));
                                }
                            });
                        }
                        upload();
                    }
                });


                



            });
        });


    </script>
</block>